import { ElLoading } from 'element-plus'
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `

export interface UseLoadingConfig {
  time?: number
  lock?: boolean
  text?: string
  background?: string
  spinner?: string
}

export const useLoading = (
  config: UseLoadingConfig = {
    time: 2000,
    lock: true,
    text: 'loading...',
    background: '#fff',
    spinner: svg
  }
) => {
  const loading = ElLoading.service({
    lock: config.lock,
    text: config.text,
    background: config.background,
    spinner: config.spinner
  })
  setTimeout(() => {
    loading.close()
  }, config.time)
}
